<template>
  <div>
      <div class="box">
      <div class="boxbox">
        <div class="shang">
          <div class="datu">
            <img src="/img/index2/s5d28493ad9ebe.png" alt="" />
          </div>
        </div>
        <div class="luanbox">
          <div class="pt2">
            <div>
              <i class="iconfont icon-order"></i>
              <div>预约挂号</div>
              <div>Appointment registration</div>
            </div>
            <div>
              <i class="iconfont icon-yuyueguahao"></i>
              <div>就诊指南</div>
              <div>Medical Guide</div>
            </div>
            <div>
              <i class="iconfont icon-yibaoka"></i>
              <div>医保服务</div>
              <div>Medical Insurance Service</div>
            </div>
            <div>
              <i class="iconfont icon-fujinrenyuanfenbu"></i>
              <div>院区分布</div>
              <div>District distribution</div>
            </div>
          </div>
          <div></div>
          <div class="ys">
            <div class="tit1">
              <p>科室导航</p>
              <p>DEPARTMENT NAVIGATION</p>
            </div>
            <div class="listnav">
              <div class="listnavitem">
                <i class="iconfont icon-xiajiantou"></i>
                <div class="xs">
                  <i class="iconfont icon-xuxian-feijidongche"></i>
                </div>
                <div>华西医院</div>
                <i class="iconfont icon-jixianghangkong_HO xs"></i>
              </div>
              <div class="listnavitem">
                <i class="iconfont icon-xiajiantou"></i>
                <div class="xs">
                  <i class="iconfont icon-xuxian-feijidongche"></i>
                </div>
                <div>温江院区</div>
                <i class="iconfont icon-jixianghangkong_HO xs"></i>
              </div>
              <div class="listnavitem">
                <i class="iconfont icon-xiajiantou"></i>
                <div class="xs">
                  <i class="iconfont icon-xuxian-feijidongche"></i>
                </div>
                <div>天府医院</div>
                <i class="iconfont icon-jixianghangkong_HO xs"></i>
              </div>
              <div class="listnavitem">
                <i class="iconfont icon-xiajiantou"></i>
                <div class="xs">
                  <i class="iconfont icon-xuxian-feijidongche"></i>
                </div>
                <div>上锦医院</div>
                <i class="iconfont icon-jixianghangkong_HO xs"></i>
              </div>
            </div>
          </div>
          <div class="pt1">
            <div>
              <i class="iconfont icon-shuxieshenqing"></i>
              <div>非手术科室</div>
              <div>Non-operating department</div>
            </div>
            <div>
              <i class="iconfont icon-icon"></i>
              <div>手术科室</div>
              <div>Operating room</div>
            </div>
            <div></div>
            <div>
              <i class="iconfont icon-drug-full"></i>
              <div>医技、辅助科室</div>
              <div>Medical technology and auxiliary departments</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/js/index2";
  export default {
    
  }
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  margin: 200px auto 0;
  max-width: 1920px;
  .boxbox {
    position: relative;
    width: 1802px;
    height: 1080px;
    margin: auto;
  }
  .shang {
    position: relative;
    width: 100%;
    height: 900px;
    background-color: #1b4388;
    background-image: url("/img/index2/ygbsy6-1.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    .datu {
      position: absolute;
      top: -103px;
      right: 103px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.luanbox {
  transform: translate(-50%, -50%);
  top: 500px;
  left: 50%;
  position: absolute;
  width: 1180px;
  height: 880px;
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 590px;
    height: 440px;
    display: flex;
    flex-wrap: wrap;
    &:nth-child(3) {
      height: 538px;
    }
    > div {
      width: 295px;
      height: 220px;
    }
  }
}
.ys {
  background-image: url(/img/index2/s5ff834919d1c4.jpg);
  background-size: 100%;
  color: #fff;
  .tit1 {
    display: flex;
    align-items: flex-end;
    > :nth-child(1) {
      height: 200px;
      padding: 55px 0 0 73px;
      writing-mode: vertical-lr;
      font-size: 45px;
    }
    > :nth-child(2) {
      padding: 0 0 0 12px;
      writing-mode: vertical-rl;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
.pt2 {
  > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    div {
      margin: 5px 0;
    }
    > :nth-child(3) {
      font-size: 14px;
    }
    i {
      font-size: 100px;
    }
  }
  > :nth-child(1) {
    background-color: #5a82cf;
  }
  > :nth-child(2) {
    background-color: #335baa;
  }
  > :nth-child(3) {
    background-color: #335baa;
  }
  > :nth-child(4) {
    background-color: #b29b6b;
  }
}
.pt1 {
  > :not(:nth-child(3)) {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    div {
      margin: 5px 0;
    }
    > :nth-child(3) {
      font-size: 14px;
    }
    i {
      font-size: 100px;
    }
  }
  > :nth-child(1) {
    background-color: #5a82cf;
  }
  > :nth-child(2) {
    background-color: #335baa;
  }
  > :nth-child(3) {
    background-color: rgba(#fff, 1);
  }
  > :nth-child(4) {
    background-color: #842331;
  }
}
.showanimate {
  position: relative;
  animation: 1s showanimate;
}
@keyframes showanimate {
  0% {
    top: 20px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

.listnav {
  display: flex;
}
.listnavitem {
  cursor: pointer;
  width: 20px;
  text-align: center;
  font-size: 18px;
  padding-top: 60px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  writing-mode: vertical-lr;
}
.xs {
  i {
    font-size: 25px;
  }
}
</style>